@charset "UTF-8";

@import '_reset';
@import '_common';

// 中间
section {
	width: 100%;
	height: 100%;
	padding: r(89) 0 r(96);
	box-sizing: border-box;
	overflow: auto;
	.swiper {
		position: relative;
		width: 100%;
		height: r(340);
		img {
			width: 100%;
			display: block;
		}
		.mask {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: r(104);
			background-color: rgba(0,0,0,.5);
			h4 {
				margin: r(20) r(25) 0;
				color: white;
				font-size: r(26);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				span {
					background-color: $color;
				}
			}
			ol {
				position: absolute;
				left: 50%;
				bottom: r(25);
				transform: translateX(-50%);
				li {
					float: left;
					width: r(8);
					height: r(8);
					margin: 0 r(12);
					border-radius: 50%;
					background-color: white;
				}
				.active {
					background-color: $color;
				}
			}
		}
	}
	.main {
		ul {
			width: r(584);
			margin: 0 auto;
			li {
				float: left;
				width: r(282);
				height: r(343);
				background-color: #f6f6f6;
				margin-top: r(20);
				overflow: hidden;
				&:nth-child(2n) {
					margin-left: r(20);
				}
				.img_show {
					width: 100%;
					img {
						width: 100%;
						display: block;
					}
				}
				h4 {
					font-size: r(22);
					margin: r(14) r(10);
					display: -webkit-box;
					-webkit-line-clamp: 2;
					overflow: hidden;
					-webkit-box-orient: vertical;
					color: black;
				}
				.yingxiao {
					font-size: r(18);
					margin: 0 r(10);
					display: flex;
					justify-content: space-between;
					align-items: center;
					button {
						color: white;
						background-color: $color;
						border: none;
						line-height: r(27);
						height: r(27);
						padding: 0 r(20);
						border-radius: r(5);
						font-size: r(18);
					}
					.xin {
						color: #c5c5c5;
						span {
							margin-left: r(10);
							i {
								font-size: r(20);
							}
						}
					}
				}
				.date {
					display: flex;
					align-items: center;
					margin-top: r(10);
					font-size: r(18);
					padding: 0 r(10);
					.tx {
						width: r(35);
						height: r(35);
						img {
							width: 100%;
							display: block;
						}
					}
					span {
						margin-left: r(10);
						color: #c5c5c5;
					}
				}
			}
		}
	}
	.more {
		text-align: center;
		padding: r(20) 0;
		color: #bbbbbb;
		font-size: r(22);
		border-top: 1px solid #bbbbbb;
		margin: r(26) r(26) 0;
	}
}